<template>
  <div class="mod-config">
    <div v-if="bookmanages">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-select v-model="dataForm.grade" placeholder="会员身份">
            <el-option
              v-for="item in options"
              :key="item.val"
              :label="item.label"
              :value="item.val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.hasSteward" placeholder="有无管家">
            <el-option
              v-for="item in options1"
              :key="item.val"
              :label="item.label"
              :value="item.val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.title" placeholder="职位">
            <el-option
              v-for="item in position"
              :key="item.val"
              :label="item.label"
              :value="item.val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.memberExpireType" placeholder="请选择会员状态">
            <el-option v-for="item in userType" :key="item.type" :label="item.name" :value="item.type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.userId" placeholder="uid" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.nickname" placeholder="昵称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.number" placeholder="手机号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">查询</el-button>
          <el-button type="primary" @click="download" :loading="downloading">下载</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;"
        :cell-style="cellStyle"
      >
        <!--<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
        <el-table-column prop="userId" header-align="center" align="center" label="uid"></el-table-column>
        <el-table-column prop="nickname" header-align="center" align="center" label="昵称"></el-table-column>
        <el-table-column prop="coverUrl" header-align="center" align="center" label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" style="width: 40px;height: 40px;"/>
          </template>
        </el-table-column>
        <el-table-column prop="phone" header-align="center" align="center" label="手机号"></el-table-column>
        <el-table-column prop="grade" header-align="center" align="center" label="会员身份">
          <template slot-scope="scope">
            <span v-if="scope.row.grade === 1">普通会员</span>
            <span v-if="scope.row.grade === 2">经理</span>
            <span v-if="scope.row.grade === 3">总监</span>
          </template>
        </el-table-column>
        <el-table-column prop="title" header-align="center" align="center" label="职位">
          <template slot-scope="scope">
            <span>{{ scope.row.title === 0 ? '班长(正常分销) ' : '' }}</span>
            <span>{{ scope.row.title === 1 ? '班主任' : '' }}</span>
            <span>{{ scope.row.title === 2 ? '班长(禁止分销)' : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="stewardshipNickName"
          header-align="center"
          align="center"
          label="管家昵称"
        ></el-table-column>
        <el-table-column
          prop="oneLevelCustomer"
          header-align="center"
          align="center"
          label="一级客户人数"
        ></el-table-column>
        <el-table-column
          prop="twoLevelCustomer"
          header-align="center"
          align="center"
          label="二级客户人数"
        ></el-table-column>
        <el-table-column
          prop="threeLevelCustomer"
          header-align="center"
          align="center"
          label="三级客户人数"
        ></el-table-column>
        <el-table-column prop="fansNumber" header-align="center" align="center" label="粉丝人数"></el-table-column>
        <el-table-column prop="memberStatus" header-align="center" align="center" label="会员状态">
          <template slot-scope="scope">
            <span :class="{red: scope.row.memberState==0 }">{{scope.row.memberState==0 ?'过期':'未过期 '}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="memberStatus" header-align="center" align="center" label="过期类型">
          <template slot-scope="scope">
            <span v-if="scope.row.memberState==0"
                  style="color: red;">{{scope.row.memberExpireType==1 ?'正常过期':'退款过期 '}}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="冻结理由">
          <template slot-scope="scope">
            <div v-if="scope.row.forbidRevenueRemarkDto">{{ scope.row.forbidRevenueRemarkDto.forbidRevenueReason }}
            </div>
            <div v-else></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="解冻时间">
          <template slot-scope="scope">
            <div v-if="scope.row.forbidRevenueRemarkDto">{{ scope.row.forbidRevenueRemarkDto.releaseTime || '永久' }}
            </div>
            <div v-else></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="分销状态">
          <template slot-scope="scope">
            <span v-if="scope.row.forbidRevenueStatus === 1">正常</span>
            <span v-else>冻结</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="客户列表">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showCustorm(scope.row.userId)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="粉丝列表">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showFans(scope.row.userId)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" width="130" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showInfo(scope.row.userId)">查看</el-button>
            <el-button v-if="!scope.row.stewardshipUserId" type="text" size="small"
                       @click="showRetailChange(scope.row.userId, scope.row.grade)">添加管家
            </el-button>
            <el-button v-if="scope.row.forbidRevenueRemarkDto" type="text" size="small"
                       @click="removeBlackList(scope.row.userId)">解冻
            </el-button>
            <el-button v-else type="text" size="small" @click="addBlackList(scope.row.userId)">冻结</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
    <!--查看详情-->
    <retail-relation-info v-if="retailInfo" :id="userId" @goBack="hideInfo"></retail-relation-info>
    <!--添加管家-->
    <retail-relation-add-butler ref="addButler" :id="userId" :grade="userGrade"
                                @refresh='getDataList'></retail-relation-add-butler>
    <!--客户列表-->
    <custom-list v-if="customInfo" ref="custom" :id="customUserId" @goBack="hideInfo"></custom-list>
    <!--粉丝列表-->
    <fans-list v-if="fansInfo" ref="fans" :id="fansUserId" @goBack="hideInfo"></fans-list>
    <!--冻结-->
    <add-black-list ref="addBlackList" @refresh='getDataList'></add-black-list>
  </div>
</template>

<script>
  import RetailRelationInfo from "./retailRelationInfo";
  import RetailRelationAddButler from "./retailRelationAddButler";
  import CustomList from "./customList";
  import FansList from "./fansList";
  import AddBlackList from "./addBlackList";

  export default {
    data() {
      return {
        downloading: false,
        userType: [],
        customInfo: false,
        fansInfo: false,
        customUserId: "",
        fansUserId: "",
        retailInfo: false,
        userGrade: "",
        options: [
          {
            val: "1",
            label: "普通会员"
          },
          {
            val: "2",
            label: "经理"
          },
          {
            val: "3",
            label: "总监"
          }
        ],
        options1: [
          {
            val: "1",
            label: "有管家"
          },
          {
            val: "0",
            label: "无管家"
          }
        ],
        //职位
        position: [
          {
            val: null,
            label: "全部"
          },
          {
            val: "0",
            label: "班长(正常分销)"
          },
          {
            val: "1",
            label: "班主任"
          },
          {
            val: "2",
            label: "班长(禁止分销)"
          },
        ],
        dataForm: {
          key: "",
          grade: "",
          userId: "",
          number: "",
          nickname: "",
          title: "",
          hasSteward: '',
        },
        userId: "",
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        // 上架
        shelfVisible: false,
        viewDetail: false,
        isAlive: "",
        bookmanages: true,
        bookchapters: false //章节
      };
    },
    mounted() {
      this.getDataList();
      this.getuserType()
    },
    components: {
      RetailRelationInfo,
      RetailRelationAddButler,
      CustomList,
      FansList,
      AddBlackList
    },
    methods: {
      cellStyle({row, column, rowIndex, columnIndex}) {
        if (row.memberState == 0) {
          return 'color: #999'
        }
      },
      search() {
        this.pageIndex = 1;
        this.getDataList();
      },
      getuserType() {
        this.$http({
          url: this.$http.adornUrl("/user/appuser/getMemberExpirationType"),
          method: "get",
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.userType = data.data
          }
        });
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true;
        let obj = {
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key
        };
        if (this.dataForm.memberExpireType) {
          obj.memberExpireType = this.dataForm.memberExpireType;
        }
        if (this.dataForm.number) {
          obj.number = this.dataForm.number;
        }
        if (this.dataForm.userId) {
          obj.userId = this.dataForm.userId;
        }
        if (this.dataForm.nickname) {
          obj.nickname = this.dataForm.nickname;
        }
        if (this.dataForm.grade) {
          obj.grade = this.dataForm.grade;
        }
        if (this.dataForm.title) {
          obj.title = this.dataForm.title;
        }
        if (this.dataForm.hasSteward) {
          obj.hasSteward = this.dataForm.hasSteward;
        }
        this.$http({
          url: this.$http.adornUrl("/sale/saleRelation/userList"),
          method: "get",
          params: this.$http.adornParams(obj)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list;
            this.totalPage = data.page.totalCount;
          } else {
            this.dataList = [];
            this.totalPage = 0;
          }
          this.dataListLoading = false;
        });
      },
      showCustorm(id) {
        this.customUserId = id;
        this.customInfo = true;
        this.bookmanages = false;
      },
      showFans(id) {
        this.fansUserId = id;
        this.fansInfo = true;
        this.bookmanages = false;
      },
      showInfo(id) {
        this.userId = id;
        this.bookmanages = false;
        this.retailInfo = true;
      },
      showRetailChange(id, grade) {
        this.userId = id;
        this.userGrade = grade;
        this.$nextTick(() => {
          this.$refs.addButler.initData();
        });
      },
      addBlackList(id) {
        this.$nextTick(() => {
          this.$refs.addBlackList.initData(id);
        });
      },
      removeBlackList(id) {
        const obj = {
          userId: id
        }
        this.$confirm('是否确定解冻?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl("/sale/saleRelation/cancelForbidUserRevenue"),
            method: "post",
            params: this.$http.adornParams(obj)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                type: 'success',
                message: '解冻成功!'
              });
              this.getDataList()
            } else {
              this.$message({
                type: 'error',
                message: data.msg
              });
            }
          });
        })
      },
      hideInfo() {
        this.bookmanages = true;
        this.retailInfo = false;
        this.customInfo = false;
        this.fansInfo = false;
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val;
      },
      download() {
        this.downloading = true
        let obj = {
          page: this.pageIndex,
          limit: this.pageSize,
        };
        if (this.dataForm.memberExpireType) {
          obj.memberExpireType = this.dataForm.memberExpireType;
        }
        if (this.dataForm.number) {
          obj.number = this.dataForm.number;
        }
        if (this.dataForm.userId) {
          obj.userId = this.dataForm.userId;
        }
        if (this.dataForm.nickname) {
          obj.nickname = this.dataForm.nickname;
        }
        if (this.dataForm.grade) {
          obj.grade = this.dataForm.grade;
        }
        if (this.dataForm.title) {
          obj.title = this.dataForm.title;
        }
        if (this.dataForm.hasSteward) {
          obj.hasSteward = this.dataForm.hasSteward;
        }
        this.$http({
          url: this.$http.adornUrl("/sale/saleRelation/userList/download"),
          method: "get",
          params: this.$http.adornParams(obj),
          headers: {
            "Content-Type": "application/json; application/octet-stream"
          },
          responseType: "arraybuffer"
        }).then(({data}) => {
          this.downloading = false
          const blob = new Blob([data], {type: "application/vnd.ms-excel"});
          const downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = "分销关系列表.xls";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        }).catch(error => {
          console.log(error)
          this.downloading = false
          this.$message.error('由于请求下载条数过多请求超时，请根据搜索条件降低下载条数～')
        });
      }
    }
  };
</script>
